<template>
<div class="pd10">

    <div class="yt yt-pj" style="margin-bottom:10px;">
        <div class="yt">
            <el-input @keyup.native.enter="sshow($event)" v-model="iptsearch" placeholder="请11输入内容"></el-input>
            <el-button @click="sshow" type="primary" icon="el-icon-search" style="margin-left:10px;"></el-button>
        </div>

    </div>

    <el-table stripe ref="singleTable" :data="tableData" highlight-current-row @current-change="handleTableClick" style="width: 100%">

        <el-table-column type="expand" width="50">
            <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="网址">
                        <span>{{ props.row.name }}</span>
                    </el-form-item>
                </el-form>
            </template>
        </el-table-column>

        <el-table-column property="thumb" label="头像" width="130" header-align="center" align="center">
            <template slot-scope="scope">
                    <img :src="scope.row.thumb" style="width:64px;height:64px;">
            </template>
        </el-table-column>

        <el-table-column property="name" label="用户名" width="120"></el-table-column>

        <el-table-column property="date" label="最后登录" width="120"></el-table-column>
        
    
        <el-table-column label="操作" width="">
            <template slot-scope="scope">
                <el-button size="" @click.stop="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="" type="danger" @click.stop="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog title="修改用户属性" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="权限" :label-width="formLabelWidth">
                <el-checkbox v-model="form.forbidLogin">禁止登录</el-checkbox>
                <el-checkbox v-model="form.forbidMsg">禁止留言</el-checkbox>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogBtnOk">确 定</el-button>
        </div>
    </el-dialog>

    <div class="pagenav">
        <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :total="tableData.length" :page-size="1">
        </el-pagination>
    </div>

</div>
</template>

<script>
export default {
    data() {
        return {
            iptsearch: '',
            tableData: [{
                    date: '2016-05-01',
                    name: '王小虎',
                    thumb: 'http://img.yixieshi.com/wp-content/uploads/2019/05/a7e40e0338214e7582bb227a45a9f0f9.jpg?imageslim|imageView2/1/w/240/h/160/interlace/1/q/70'
                }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    thumb: 'http://img.yixieshi.com/wp-content/uploads/2019/05/a7e40e0338214e7582bb227a45a9f0f9.jpg?imageslim|imageView2/1/w/240/h/160/interlace/1/q/70'
                },
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    thumb: 'http://img.yixieshi.com/wp-content/uploads/2019/05/a7e40e0338214e7582bb227a45a9f0f9.jpg?imageslim|imageView2/1/w/240/h/160/interlace/1/q/70'
                },
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    thumb: 'http://img.yixieshi.com/wp-content/uploads/2019/05/a7e40e0338214e7582bb227a45a9f0f9.jpg?imageslim|imageView2/1/w/240/h/160/interlace/1/q/70'
                },
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    thumb: 'http://img.yixieshi.com/wp-content/uploads/2019/05/a7e40e0338214e7582bb227a45a9f0f9.jpg?imageslim|imageView2/1/w/240/h/160/interlace/1/q/70'
                },
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    thumb: 'http://img.yixieshi.com/wp-content/uploads/2019/05/a7e40e0338214e7582bb227a45a9f0f9.jpg?imageslim|imageView2/1/w/240/h/160/interlace/1/q/70'
                },
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    thumb: 'http://img.yixieshi.com/wp-content/uploads/2019/05/a7e40e0338214e7582bb227a45a9f0f9.jpg?imageslim|imageView2/1/w/240/h/160/interlace/1/q/70'
                },
                {
                    date: '2016-05-8',
                    name: '王小虎',
                    thumb: 'http://img.yixieshi.com/wp-content/uploads/2019/05/a7e40e0338214e7582bb227a45a9f0f9.jpg?imageslim|imageView2/1/w/240/h/160/interlace/1/q/70'
                }
            ],
            currentRow: null,

            dialogTableVisible: false,
            dialogFormVisible: false,
            form: {
                forbidLogin: true,
                forbidMsg: false
            },
            formLabelWidth: '100px',
            totalPages: '20'
        }
    },

    methods: {
        sshow(e) {
            console.log(e)
        },
        setCurrent(row) {
            this.$refs.singleTable.setCurrentRow(row);
        },
        dialogBtnOk() {
            console.log(this.form)
        },
        handleCurrentChange(val) {
            console.log('当前页',val)
            this.currentRow = val;
        },
        handleTableClick(val) {
            console.log('当前行的值',val)
        },
        handleEdit(index, row) {
            console.log('栀子花', index, row);
            this.dialogFormVisible = true
        },
        handleDelete(index, row) {
            console.log('金克拉', index, row);
            this.tableData.splice(index, 1)
        }
    }
}
</script>

<style>
.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}

.pagenav {
    background-color: #fff;
    padding: 10px;
    margin-top: 10px;
}
</style>
